﻿@{
    ViewBag.Title = "Test1";
    Layout = "~/Views/Shared/_LayoutDigital.cshtml";
}

<div class="pageheader">
    <h2><i class="fa fa-user"></i> 个人中心 <span>安全设置</span></h2>
    <div class="breadcrumb-wrapper">
        <span class="label">你的位置:</span>
        <ol class="breadcrumb">
            <li><a href="">个人中心</a></li>
            <li class="active">安全设置</li>
        </ol>
    </div>
</div>
<div class="contentpanel">
    <link href="../DigitalStyle/css/jquery.gritter.css" rel="stylesheet">
    <script src="../DigitalStyle/js/jquery.gritter.min.js"></script>
    <script src="../DigitalStyle/js/raphael-2.1.0.min.js" type="text/javascript"> </script>
    <style type="text/css">
        #holder {
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            position: absolute;
            z-index: 999;
            height: auto;
        }

        .item {
            position: absolute;
            top: 0px;
            z-index: 0;
            padding: 0px;
            height: 30px;
            width: 200px;
        }
    </style>

    <div id="holder"></div>
    <div id="item1" class="item" data-item='{"nodeId":"1","ParentNode":"","level":"1","color":"#1588e0"}' title="方案"></div>
    <div id="item2" class="item" data-item='{"nodeId":"2","ParentNode":"1","level":"2","color":"#1588e0"}' title="方案"></div>
    <div id="item3" class="item" data-item='{"nodeId":"3","ParentNode":"1","level":"2","color":"#1588e0"}' title="模具"></div>
    <div id="item4" class="item" data-item='{"nodeId":"4","ParentNode":"1","level":"2","color":"#1588e0"}' title="AP"></div>
    <div id="item5" class="item" data-item='{"nodeId":"5","ParentNode":"1","level":"2","color":"#1588e0"}' title="其他"></div>
    <div id="item6" class="item" data-item='{"nodeId":"6","ParentNode":"2","level":"3","color":"#1588e0"}' title="子节点测试1"></div>
    <div id="item7" class="item" data-item='{"nodeId":"7","ParentNode":"2","level":"3","color":"#1588e0"}' title="子节点测试2"></div>
    <div id="item8" class="item" data-item='{"nodeId":"8","ParentNode":"2","level":"3","color":"#1588e0"}' title="子节点测试3"></div>
    <div id="item9" class="item" data-item='{"nodeId":"9","ParentNode":"2","level":"3","color":"#1588e0"}' title="子节点测试4"></div>
    <div id="item10" class="item" data-item='{"nodeId":"10","ParentNode":"2","level":"3","color":"#1588e0"}' title="子节点测试5"></div>
    <div id="item11" class="item" data-item='{"nodeId":"11","ParentNode":"2","level":"3","color":"#1588e0"}' title="子节点测试6"></div>
    <div id="item12" class="item" data-item='{"nodeId":"12","ParentNode":"2","level":"3","color":"#1588e0"}' title="子节点测试7"></div>
    <div id="item13" class="item" data-item='{"nodeId":"13","ParentNode":"2","level":"3","color":"#1588e0"}' title="子节点测试8"></div>
    <div id="item14" class="item" data-item='{"nodeId":"14","ParentNode":"2","level":"3","color":"#1588e0"}' title="子节点测试9"></div>
    <div id="item15" class="item" data-item='{"nodeId":"15","ParentNode":"2","level":"3","color":"#1588e0"}' title="子节点测试10"></div>
    <div id="item16" class="item" data-item='{"nodeId":"16","ParentNode":"2","level":"3","color":"#1588e0"}' title="子节点测试11"></div>
    <div id="item17" class="item" data-item='{"nodeId":"17","ParentNode":"3","level":"3","color":"#1588e0"}' title="子节点测试9"></div>
    <div id="item18" class="item" data-item='{"nodeId":"18","ParentNode":"3","level":"3","color":"#1588e0"}' title="子节点测试10"></div>
    <div id="item19" class="item" data-item='{"nodeId":"19","ParentNode":"3","level":"3","color":"#1588e0"}' title="子节点测试11"></div>
    <div class="modal fade bs-example-modal-static" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-backdrop="static" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>
                    <h4 class="modal-title">流程设置</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group ">
                        <label class="col-md-3 control-label">主节点:</label>
                        <div class="col-md-4">
                            <input type="hidden" id="NodeId" />
                            <label id="NodeName" class="control-label"></label>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-md-3 control-label">下级节点名称:</label>
                        <div class="col-md-5">
                            <input type="text" id="NextNodeName" value="" class="form-control" required />
                        </div>
                    </div>
                    <div class="form-group  ">
                        <div class="row">
                            <div class="col-md-3 col-md-offset-3">
                                <a class="btn btn-success btn-block" data-loading-text="正在提交..." href="javascript:AddNode()">添加新子节点</a>

                            </div>
                            <div class="col-md-3">

                                <a class="btn btn-success btn-block" data-loading-text="正在提交..." href="javascript:DeleteNode()">删除节点</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var _w, _h, r
        _h = 30; _w = 200;
        var shapes = new Object(); //节点集合
        var connections = [];
        var Level2x = _w + 10 + 60;
        var Level2y;
        //C#
        var Level2Count = 4;
       
        var ShowChildParentId = 2;//显示子节点
        var OldShapesCount = $(".item").length;

        $(function () {
            InitElements();

        });

       
        function InitElements() {
            var dragger = function () {
                this.ox = this.attr("x");
                this.oy = this.attr("y");
                this.animate({ "fill-opacity": 1 }, 500);
            };
            var $nodeList = $(".item"); //节点集合jquery对象
            var _x, _y, shapeLen;
          
            shapeLen = $nodeList.length; //节点数量

            _x = $(".contentpanel").offset().left; _y = $(".contentpanel").offset().top;
            //拖动事件
            var move = function (dx, dy) {
                var att = { x: this.ox + dx, y: this.oy + dy };
                this.attr(att);
                var lb = this.data("cooperative");
                var attr1 = { x: this.ox + dx + this.attr("width") / 2, y: this.oy + dy + this.attr("height") / 2 };
                lb.attr(attr1);
                $("#item" + this.id).offset({ top: this.oy + dy + 10 + _y, left: this.ox + dx + 20 + _x });
                for (var i = connections.length; i--;) { r.drawArr(connections[i]); }
            };
            //拖动结束后的事件
            var up = function () { this.animate({ "fill-opacity": 0.9 }, 500); };
            //创建绘图对象
            if ("undefined" == typeof r) {
                r = Raphael("holder", $(".contentpanel").width(), $(window).height());
            }
            //定义元素坐标高宽


            Level2y = $(window).height() / 2 - _h / 2 - (Level2Count / 2) * (_h + 30)
            var Level1y = $(window).height() / 2 - _h / 2;
            //Main Node

           var level3Num = 1;
           var level2Num = 1;

           for (var i = 0; i <= OldShapesCount; i++) {
             
                if ("undefined" != typeof shapes[i + 1]) {
                    if (shapes[i + 1][0] != null)
                        {
                        shapes[i + 1].data("cooperative").remove();
                        shapes[i + 1].data("Shadow").remove();
                        shapes[i + 1].remove();
                    }
                }
            }
           


            for (var i = 0; i < connections.length; i++) {
                connections[i].arrPath.remove();
            }

            $nodeList.each(function (index, item) {

                var r_y = (level2Num) * (_h + 30) + Level2y;
                //(_h + 30) * level2Num + Level2y;
                //节点json数据
                var data_item = $.parseJSON($(item).attr("data-item"));
                if (data_item.level == 1) {
                    this.Label = r.text(10 + _w / 2, Level1y + _h / 2, "项目编号").attr({ fill: "#fff", "font-family": "宋体", "font-size": 20, "text-rendering": "inherit", "cursor": "default" });
                    shapes[1] = r.rect(10, Level1y, _w, _h, 4);
                    shapes[1].attr({ fill: data_item.color, "fill-opacity": 1, "stroke": "none" });
                    shapes[1].id = 1;
                    this.shadow = r.rect(10 + 3, Level1y + 3, _w, _h, 4).attr({ fill: "#000000", "fill-opacity": 0.25, "stroke-width": 0 });
                    shapes[1].data("cooperative", this.Label).toFront(); //拖动节点事件
                    shapes[1].data("ry", Level1y);
                    this.Label.toFront();
                    shapes[1].data("Shadow", this.shadow);
                    shapes[1].dblclick(function () { ShowModel(this.id, "项目编号") }); //绑定双击节点事件
                    shapes[1].attr("title", "项目编号");
                }

                if (data_item.level == 2) {
                    var ChildCount = 0;
                    $nodeList.each(function (index, item) {
                        var Subdata_item = $.parseJSON($(item).attr("data-item"));
                        if (Subdata_item.ParentNode == data_item.nodeId) {
                            ChildCount ++;
                        }
                        
                    });
                    //为节点添加样式和事件，并且绘制节点之间的箭头ffcc00
                    this.Label1 = r.text(10 + _w / 2 + Level2x, r_y + _h / 2, item.title).attr({ fill: "#fff", "font-family": "宋体", "font-size": 20, "text-rendering": "inherit", "cursor": "default" });
                    shapes[data_item.nodeId] = r.rect(10 + Level2x, r_y, _w, _h, 4);
                    shapes[data_item.nodeId].attr({ fill: data_item.color, "fill-opacity": 1, "stroke": "none" });
                    shapes[data_item.nodeId].id = data_item.nodeId;
                    this.shadow1 = r.rect(10 + 3 + Level2x, r_y + 3, _w, _h, 4).attr({ fill: "#000000", "fill-opacity": 0.25, "stroke-width": 0 });
                    shapes[data_item.nodeId].data("cooperative", this.Label1).toFront(); //拖动节点事件
                    shapes[data_item.nodeId].data("ry", r_y);
                    shapes[data_item.nodeId].ChildCount = ChildCount;
                    shapes[data_item.nodeId].hover(function (obj) {
                        //hide show
                        //line show
                        var ParentId = data_item.nodeId;
                        connections.forEach(function (item, index) {
                            
                            if (item.id - 1000 == ParentId && item.level == 3) {
                                
                                if (item.obj2[0] != null) {
                                    item.obj2.data("cooperative").show();
                                    item.obj2.data("Shadow").show();
                                    item.arrPath.show();
                                    item.obj2.show();
                                }
                            }
                            else if (item.id-1000 != ParentId && item.level == 3) {
                                
                                if (item.obj2[0] != null) {
                                    item.obj2.hide();
                                    item.obj2.data("cooperative").hide();
                                    item.obj2.data("Shadow").hide();
                                    item.arrPath.hide();
                                }
                            }
                        });

                    }, function (obj) {
                       
                    });
                    this.Label1.toFront();
                    shapes[data_item.nodeId].data("Shadow", this.shadow1);
                    shapes[data_item.nodeId].dblclick(function () { ShowModel(this.id, item.title) }); //绑定双击节点事件
                    shapes[data_item.nodeId].attr("title", item.title);
                    level2Num++;
                }
                if (data_item.level == 3) {
                    //Level3Count
                    var r_y = shapes[data_item.ParentNode].data("ry");
                    var ChildCount = shapes[data_item.ParentNode].ChildCount;
                    var ChildId = data_item.nodeId;
                    var Level3yNum = level3Num - ChildCount / 2;
                    //var Level3yNum = ChildCount - Level3Count / 2;
                    var SubShadow = r.rect(10 + _w + 60 + 3 + Level2x, r_y + (Level3yNum) * _h + 20 * (Level3yNum) + 3, _w, _h, 4).attr({ fill: "#000000", "fill-opacity": 0.25, "stroke-width": 0 }).toBack();
                    shapes[ChildId] = r.rect(10 + _w + 60 + Level2x, r_y + (Level3yNum) * _h + 20 * (Level3yNum), _w, _h, 4);
                    this.Label = r.text(10 + _w + _w / 2 + 60 + Level2x, r_y + (Level3yNum) * _h + 20 * (Level3yNum) + _h / 2, item.title).attr({ fill: "#fff", "font-family": "宋体", "font-size": 20, "text-rendering": "inherit", "cursor": "default" });
                    shapes[ChildId].attr({ fill: data_item.color, "fill-opacity": 1, "stroke-width": 0 });
                    shapes[ChildId].id = ChildId;
                  
                    shapes[ChildId].data("cooperative", this.Label).toFront();; //拖动节点事件
                    shapes[ChildId].data("Shadow", SubShadow);
                    shapes[ChildId].level = data_item.level;
                    this.Label.toFront();
                    shapes[ChildId].dblclick(function () { ShowModel(this.id, item.title) }); //绑定双击节点事件
                    shapes[ChildId].attr("title", item.title);
                    if (ShowChildParentId != data_item.ParentNode) {

                        shapes[ChildId].hide();
                        SubShadow.hide();
                        this.Label.hide();
                    }
                    if (level3Num == ChildCount)
                    {
                        level3Num = 0;
                    }
                    level3Num++;
                }
            });
            //存储节点间的顺序
            $nodeList.each(function (i, item) {
                //节点json数据
                var data_item = $.parseJSON($(item).attr("data-item"));
                if (data_item.ParentNode) {
                    connections.push(r.drawArr({ obj1: shapes[data_item.ParentNode], obj2: shapes[data_item.nodeId] }));
                }
            });
        }


        //随着节点位置的改变动态改变箭头
        Raphael.fn.drawArr = function (obj) {
            var point = getStartEnd(obj.obj1, obj.obj2);
            var path1 = getArrzhixian(point.start.x, point.start.y, point.end.x, point.end.y, 8);
            if (obj.arrPath) {
                obj.arrPath.attr({ path: path1, "stroke-width": 2, "fill": "none", "stroke": "black" });
                
            } else {
                obj.arrPath = this.path(path1);
                obj.arrPath.attr({ "stroke-width": 2, "fill": "none", "stroke": "black" });
            }
            obj.id = obj.obj1.id*1 + 1000;
            if (obj.obj2.level == 3) {
                obj.level = 3;
                if (ShowChildParentId != obj.obj1.id)
                {
                    obj.arrPath.hide();
                }
            }
            else {
                obj.level = 0;
            }
            return obj;
        };

        function ShowModel(Id, Name) {
            $("#NodeId").val(Id);
            $("#NodeName").text(Name);
            $(".bs-example-modal-static").modal("show");
        }

        function DeleteNode()
        {
            var Id = $("#NodeId").val();
            var data_item = $.parseJSON($("#item" + Id).attr("data-item"));
            var $nodeList = $(".item");
            var IsHasChild = false;
            var IsLevel1 = false;
            $nodeList.each(function (index, item) {
                var data_item = $.parseJSON($(item).attr("data-item"));
                if (data_item.ParentNode == Id)
                {
                    IsHasChild = true;
                }
                if (data_item.level == 1 && data_item.nodeId == Id)
                {
                    IsLevel1 = true;
                }
            });
            if (IsHasChild) {
                jQuery.gritter.add({
                    title: '系统提示!',
                    text: '这个节点下有子节点，请先删除子节点',
                    sticky: false,
                    time: ''
                });
            }
            else if (IsLevel1)
            {
                jQuery.gritter.add({
                    title: '系统提示!',
                    text: '主节点不能删除',
                    sticky: false,
                    time: ''
                });
            }
            else {
                if (data_item.level == 2) {
                    Level2Count--;
                }
                
                $("#item" + Id).remove();
                ShowChildParentId = data_item.ParentNode;
                $(".bs-example-modal-static").modal("hide");
                InitElements();
            }
        }

        //添加子节点
        function AddNode() {
            var ParentId = $("#NodeId").val();
            var NodeName = $("#NextNodeName").val();
            var data_item = $.parseJSON($("#item" + ParentId).attr("data-item"));
            
            if (data_item.level != 3) {
                if (data_item.level != 2) {
                    Level2Count++;
                }
                
                var Id = OldShapesCount*1 + 1;
                var level = data_item.level*1 + 1;
                //alert(Id + ParentId + NodeName);
                var $nodeList = $(".item");
                var LevelLastDivId=0;
                $nodeList.each(function (index, item) {
                    var data_item = $.parseJSON($(item).attr("data-item"));
                    if (data_item.ParentNode == ParentId) {
                        LevelLastDivId = data_item.nodeId;
                    }
                });
                if (LevelLastDivId != 0) {
                    $("#item" + LevelLastDivId).after("<div id=\"item" + Id + "\" class=\"item\" data-item='{\"nodeId\":\"" + Id + "\",\"ParentNode\":\"" + ParentId + "\",\"level\":\"" + level + "\",\"color\":\"#1588e0\"}' title=\"" + NodeName + "\"></div>");
                }
                else {
                    $(".item:last").after("<div id=\"item" + Id + "\" class=\"item\" data-item='{\"nodeId\":\"" + Id + "\",\"ParentNode\":\"" + ParentId + "\",\"level\":\"" + level + "\",\"color\":\"#1588e0\"}' title=\"" + NodeName + "\"></div>");
                }
                $(".bs-example-modal-static").modal("hide");
                ShowChildParentId = ParentId;
                OldShapesCount++;
                InitElements();
            }
            else {
                jQuery.gritter.add({
                    title: '系统提示!',
                    text: '不能在三级节点上增加新的子节点',
                    sticky: false,
                    time: ''
                });
            }
        }

        function getStartEnd(obj1, obj2) {
            var bb1 = obj1.getBBox(),
                bb2 = obj2.getBBox();
            var p = [
                    { x: bb1.x + bb1.width / 2, y: bb1.y - 1 },
                    { x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1 },
                    { x: bb1.x - 1, y: bb1.y + bb1.height / 2 },
                    { x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2 },
                    { x: bb2.x + bb2.width / 2, y: bb2.y - 1 },
                    { x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1 },
                    { x: bb2.x - 1, y: bb2.y + bb2.height / 2 },
                    { x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2 }
            ];
            var d = {}, dis = [];
            for (var i = 0; i < 4; i++) {
                for (var j = 4; j < 8; j++) {
                    var dx = Math.abs(p[i].x - p[j].x),
                        dy = Math.abs(p[i].y - p[j].y);
                    if (
                         (i == j - 4) ||
                         (((i != 3 && j != 6) || p[i].x < p[j].x) &&
                         ((i != 2 && j != 7) || p[i].x > p[j].x) &&
                         ((i != 0 && j != 5) || p[i].y > p[j].y) &&
                         ((i != 1 && j != 4) || p[i].y < p[j].y))
                       ) {
                        dis.push(dx + dy);
                        d[dis[dis.length - 1]] = [i, j];
                    }
                }
            }
            if (dis.length == 0) {
                var res = [0, 4];
            } else {
                res = d[Math.min.apply(Math, dis)];
            }
            var result = {};
            result.start = {};
            result.end = {};
            result.start.x = p[res[0]].x;
            result.start.y = p[res[0]].y;
            result.end.x = p[res[1]].x;
            result.end.y = p[res[1]].y;
            return result;
        }


        //获取组成箭头的三条线段的路径
        function getArr(x1, y1, x2, y2, size) {
            var angle = Raphael.angle(x1, y1, x2, y2); //得到两点之间的角度
            var a45 = Raphael.rad(angle - 45); //角度转换成弧度
            var a45m = Raphael.rad(angle + 45);
            var x2a = x2 + Math.cos(a45) * size;
            var y2a = y2 + Math.sin(a45) * size;
            var x2b = x2 + Math.cos(a45m) * size;
            var y2b = y2 + Math.sin(a45m) * size;
            //var result = ["M", x1, y1, "L", x2, y2, "L", x2a, y2a, "M", x2, y2, "L", x2b, y2b];
            var result = ["M", x1, y1, "L", x2, y2];
            return result;
        }

        function getArrzhixian(x1, y1, x2, y2, size) {

            var angle = Raphael.angle(x1, y1, x2, y2); //得到两点之间的角度
            var a45 = Raphael.rad(angle - 45); //角度转换成弧度
            var a45m = Raphael.rad(angle + 45);
            var x2a = x1 + 30
            var y2a = y1;
            var x2b = x1 + 30;
            var y2b = y2;
            var result;
            if (x1 != x2) {
                result = ["M", x1, y1, "L", x2a, y2a, "M", x2a, y2a, "L", x2b, y2b, "M", x2b, y2b, "L", x2, y2];
            }
            else {
                result = ["M", x1, y1, "L", x2, y2];

            }
            return result;
        }
    </script>

</div>

